<html>

<script type="text/javascript" src="resources/js/lib/jquery-2.1.4.js"/>
<script type="text/javascript" src="resources/js/lib/jquery-pack.js"></script>
<script type="text/javascript" src="resources/js/lib/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">
    function preview(img, selection) {
        var scaleX = 500/ selection.width;
        var scaleY = 500 / selection.height;

        $('#thumbnail + div > img').css({
            width: Math.round(scaleX * 500) + 'px',
                height: Math.round(scaleY * 500) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
    }

    $(document).ready(function(){
            //选择文件成功则提交表单
           $("#upload_file").change(function(){
                    if($("#upload_file").val() != '') $("#submit_form").submit();
                 });
            //iframe加载响应，初始页面时也有一次，此时data为null。
             $("#exec_target").load(function(){
                     var data = $(window.frames['exec_target'].document.body).find("<img>").html();
                     //若iframe携带返回数据，则显示在feedback中
                    if(data != null){
                           $("#feedback").html(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                           $("#upload_file").val('');
                       }
                });
         });

</script>
<body>
<h2>Hello index</h2>

    <form id="submit_form" method="post" action="image/upload" target="exec_target" enctype="multipart/form-data">
            <input type="file" name="uploadFile" id="upload_file">        <!-- 添加上传文件 -->
    </form>
   <iframe id="exec_target" name="exec_target"></iframe>    <!-- 提交表单处理iframe框架 -->
   <div id="feedback">
   </div>    <!-- 响应返回数据容器 -->
</body>
</html>
